<template>
  <div>
    <el-form label-position="right" label-width="150px" size="mini" :inline="true" :model='merchant' :rules='rules' ref="merchantForm">
        <el-form-item label="商家编码" prop='merchantCode'>
            <el-input v-model.trim="merchant.merchantCode" placeholder="3位字母加3位数字"></el-input>
        </el-form-item>
        <br>
        <el-form-item label="开户账号" prop='loginName'>
            <el-input v-model.trim="merchant.loginName" placeholder="建议使用手机号"></el-input>
        </el-form-item>
        <el-form-item label="商家类型">
            <el-radio v-model="merchant.merchantType" label="PERSON">个体</el-radio>
            <el-radio v-model="merchant.merchantType" label="COMPANY">公司</el-radio>
        </el-form-item>
        <el-form-item label="商家名称" prop='companyName'>
            <el-input v-model.trim="merchant.companyName"></el-input>
        </el-form-item>
        <el-form-item label="商家电话" prop='companyPhone'>
            <el-input v-model.trim="merchant.companyPhone"></el-input>
        </el-form-item>

        <el-form-item label="商家地址" prop='address'>
            <el-input v-model.trim="merchant.address" style="width:292%"></el-input>
        </el-form-item>
        <br>

        <el-form-item label="联系人姓名" prop="contactName">
            <el-input v-model.trim="merchant.contactName"></el-input>
        </el-form-item>
        <el-form-item label="QQ">
            <el-input v-model.trim="merchant.qq"></el-input>
        </el-form-item>

        <el-form-item label="联系人手机" prop='contactMobile'>
            <el-input v-model.trim="merchant.contactMobile"></el-input>
        </el-form-item>
         <el-form-item label="微信">
            <el-input v-model.trim="merchant.wechat"></el-input>
        </el-form-item>
        
        <el-form-item label="合同编号">
            <el-input v-model.trim="merchant.contract"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop='email'>
            <el-input v-model.trim="merchant.email"></el-input>
        </el-form-item>
    </el-form>

    <el-form label-position="right" label-width="150px" size="mini">
        <el-form-item label="备注">
            <el-input type="textarea" style="width:80%" v-model.trim="merchant.remark" resize="none"></el-input>
        </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'merchantEditer',
  data(){
    var checkMerchantCode=(rule,value,callback)=>{
        var rex=/^[A-Za-z]{3}\d{3}$/;

        if(!value){
            callback(new Error("商家编码不能为空"));
            return;
        }
        if(value.length!=6){
            callback(new Error("商家编码应为3位字母加3位数字"));
            return;
        }
        if(value.match(rex)==null){
            callback(new Error("商家编码应为3位字母加3位数字"));
            return;
        }
        var params=new URLSearchParams();
        params.append("merchantCode",value);
        params.append("merchantId",this.merchant.merchantId);
        this.$http.post(this.$store.state.url+"/form/unique/merchantcode",params).then(
        response=>{
          if(response.data.status==200)callback();
          else callback(new Error(response.data.message));
        }
      ).catch();
    };
    var checkLoginName=(rule,value,callback)=>{
        if(!value){
            callback(new Error("账户不能为空"));
            return;
        }
        if(value.length<5){
            callback(new Error("字符数量不能低于5个"));
            return;
        }
        var params=new URLSearchParams();
        params.append("loginName",value);
        params.append("merchantId",this.merchant.merchantId);
        this.$http.post(this.$store.state.url+"/form/unique/loginname",params).then(
        response=>{
          if(response.data.status==200)callback();
          else callback(new Error("账户已存在"));
        }
      ).catch();
    };
    var checkCompanyPhone=(rule,value,callback)=>{
        //var rex1=/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9]|17[0|1|2|3|5|6|7|8|9])\d{8}$/;
        var rex1=/^1\d{10}$/;
        var rex2=/\d{3}-\d{8}|\d{4}-\d{7}|\d{3}-\d{7}|\d{4}-\d{8}/;
        if(!value)callback(new Error("商家电话不能为空"));
        else if(value.match(rex1)!=null)callback();
        else if(value.match(rex2)!=null)callback();
        else callback(new Error("请输入正确的手机号或电话号码"));
    };
    var checkContactMobile=(rule,value,callback)=>{
        var rex=/^1|0\d{9}$/;
        console.log(rex.test(value))
        if(!value)callback(new Error("手机号不能为空"));
        else if(rex.test(value))callback(new Error("请输入正确的手机号"));
        else callback();
    };
    var checkEmail=(rule,value,callback)=>{
        var rex=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
        if(!value)callback(new Error("电子邮箱不能为空"));
        else if(value.match(rex)==null)callback(new Error("请输入正确的电子邮箱"));
        else callback();
    };
    return {
      rules:{
            merchantCode:[
                {required: true,validator:checkMerchantCode, trigger: 'blur' }
            ],
            loginName:[
                {required: true,validator:checkLoginName, trigger: 'blur' }
            ],
            companyName:[
                {required: true, message: '商户名称不能为空', trigger: 'blur' },
                {min:4, message: '商户名称不能少于4个字', trigger: 'blur' },
            ],
            companyPhone:[
                {required: true,validator:checkCompanyPhone, trigger: 'blur' }
            ],
            address:[
                {required: true, message: '商家地址不能为空', trigger: 'blur' },
            ],
            contactName:[
                {required: true, message: '联系人姓名不能为空', trigger: 'blur' },
            ],
            contactMobile:[
                {required: true, validator:checkContactMobile, trigger: 'blur' },
            ],
            //email:[{required: true,validator:checkEmail, trigger: 'blur' }],
        }
    }
  },
  methods:{
   
  },
  props:["merchant"]
}
</script>

<style scoped>

</style>
